<template>
  <div class="page-wrap">
    <div class="page-title">Icon 图标</div>
    <div class="page-sub-title">安装</div>
    <highlightjs
      language="shell"
      code="$ npm install cds-ui-icon"
    />

    <div class="page-sub-title">注册所有图标</div>
    <highlightjs
      language="js"
      code="import * as CdsIcons from 'cds-ui-icon'

const app = createApp(App)
for (const [key, component] of Object.entries(CdsIcons)) {
   app.component(key, component)
}
app.mount('#app')
"

    />
    <div class="page-sub-title">图标集合</div>
    <div class="page-description">点击图标复制代码</div>
    <div id="show-icons">
      <div class="svg-icon btn--info-id--copy" @click="CopyPast(`<${icon.name}/>`)" v-for="icon in icons"
           :key="icon.name">
        <component :is="icon"></component>
        <div style="font-size: 12px">{{ icon.name }}</div>
      </div>
    </div>
  </div>

</template>

<script setup>
import * as icons from "cds-ui-icon";
import {CopyPast} from '../../utils/common'

</script>

<style lang="scss">
#show-icons {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;

  .svg-icon {
    border: 1px solid var(--el-border-color);
    padding: 12px;
    width: 200px;
  }

  .svg-icon:hover {
    cursor: pointer;
    background-color: var(--backgroundColor2);
  }

  svg {
    width: 30px;
    height: 30px;
    padding: 12px 0;
  }

}

</style>
